<template>
    <div class="goodsinfo-container">
        <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        >
            <div id="value" class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>
        <!--商品轮播图区域-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :lunbotuList="lunbotuList" :isfull="false"></swiper>
                </div>
            </div>
        </div>
        <!--商品购买区域-->
            <div class="mui-card">
                <div class="mui-card-header">{{goodsinfo.ticket_typename}}</div>
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        订票价格:<span class="now_price">¥{{goodsinfo.price}}</span>
                        <div class="amount">
                            <p style="margin-top:8px">购买数量:&nbsp;</p><numbox @getCount="getSelectedCount" :max="goodsinfo.amount"></numbox>
                        </div>
                        <p>
                            <mt-button v-on:click="comfirmBuy()" type="primary" size="small">立即购买</mt-button>
                            <!--<mt-button type="danger" size="small" @click="addToShopCart">加入购物车</mt-button>-->
                        </p>
                    </div>
                </div>
            </div>
        <!--商品参数区域-->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>库存情况:{{goodsinfo.amount}}</p>
                    <p>上架时间:{{goodsinfo.created_time | dataFormat }}</p>
                    <p>最新更新时间:{{goodsinfo.last_modefied_time | dataFormat }}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
                <!--<mt-button type="primary" size="large" plain>图文介绍</mt-button>-->
                <mt-button type="danger" size="large" plain @click="goComment(id)">票类评论</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
    import swiper from '../subcomponents/swiper.vue'
    import numbox from '../subcomponents/goodsinfo_numbox.vue'
    import { MessageBox } from 'mint-ui'
    import { Toast } from 'mint-ui'
    export default {
        data(){
            return{
                id: this.$route.params.id,
                ballFlag:false, //控制小球隐藏和显示的标识符
                selectedCount: 1,   //保存用户选中商品数量 默认为1
                lunbotuList:[],
                goodsinfo:[],
                school:'',
                people:'',
                agency:'',
                guide:'',
                car_number:'',
            }
        },
        created(){
            this.getLunbotu();
            this.getTickInfo();
        },
        methods:{
            getLunbotu(){
                this.$http.get('getImage/' + this.id ).then(result => {
                        this.lunbotuList = result.body;
                })
            },
            getTickInfo(){
                this.$http.get('getTickInfo/' + this.id ).then(result => {
                    this.goodsinfo = result.body;
                })
            },
            goDesc(id){     //使用编程式导航跳转到图文界面
                this.$router.push({name:'goodsdesc', params:{id}})
            },
            goComment(id){     //使用编程式导航跳转到评论
                this.$router.push({name:'goodscomment', params:{id}})
            },
            addToShopCart(){
                this.ballFlag = !this.ballFlag;
                //拼接出要保存到store中car数组的商品信息对象
                var goodsinfo = {id: this.id, count: this.selectedCount, price: this.goodsinfo.price, selected: true };
                this.$store.commit('addToCar', goodsinfo);  //调用store中的方法来将商品加入购物车
            },
            beforeEnter(el){
                el.style.transform = "translate(0,0)"
            },
            enter(el, done){
                el.offsetWidth;

                //小球动画优化思路
                //1. 导致动画不准确的原因 是小球最终位置已经局限在某一分辨率的滚动条未滚动的情况下
                //2. 动态计算坐标值
                //3. 思路: 先得到徽标的横纵坐标 再获取小球的横纵坐标 然后让x y值求差 得到横纵坐标的位移
                //4. domObject.getBoundingClintRect() 获取元素左上角的top和left值

                //获取小球在页面中的位置
                const ballPosition = this.$refs.ball.getBoundingClientRect();
                //获取徽标在页面中的位置
                const badgePosition = document.getElementById('badge').getBoundingClientRect();
                const xDist = badgePosition.left - ballPosition.left;
                const yDist = badgePosition.top - ballPosition.top;

                el.style.transform = 'translate('+xDist+'px, '+yDist+'px)';
                el.style.transition = "all 0.7s cubic-bezier(.4, -0.3, 1, .68)";
                done()
            },
            afterEnter(el){
                this.ballFlag = !this.ballFlag;
            },
            getSelectedCount(count){
                //当子组件把选中数量传递给父组件时 保存到data上
                this.selectedCount = count;
            },
            comfirmBuy(){
                //标准票和儿童票的确认框
                if(this.goodsinfo.ticket_typeid == 81 || this.goodsinfo.ticket_typeid == 82){
                    MessageBox.confirm('确认购买?').then(action => {
                        if(action == 'confirm'){
                            this.$http.post('Buyticket', {
                                tick_id:this.id + sessionStorage.getItem('token'),
                                account:sessionStorage.getItem('token'),
                                ticket_typeid:this.goodsinfo.ticket_typeid,
                                auth:this.goodsinfo.auth,
                                price:this.goodsinfo.price,
                                ticket_typename:this.goodsinfo.typename
                            } ).then(result => {
                                if(result.body.err_code === 1){
                                    console.log('已买票');
                                    Toast({
                                        message: '您已购买过门票',
                                        iconClass: 'fa fa-times fa-4x'
                                    });
                                }else{
                                    Toast({
                                        message: '购买成功',
                                        iconClass: 'fa fa-check fa-4x'
                                    });
                                }
                            })
                        }
                    });
                }
                //赠票和优惠票的确认框
                else if(this.goodsinfo.ticket_typeid == 87 || this.goodsinfo.ticket_typeid == 86){
                    Toast({
                        message: '本票类禁止购买',
                        iconClass: 'fa fa-times fa-4x'
                    });
                }
                //学生票的确认框
                else if(this.goodsinfo.ticket_typeid == 83){
                    MessageBox.prompt('请输入学校名称').then(({ value, action }) => {
                        this.school = value;
                        if(action == 'confirm'){
                            MessageBox.prompt('请输入学校人数').then(({ value, action }) => {
                                this.people = value;
                                if(action == 'confirm'){
                                    this.$http.post('Buyticket', {
                                        tick_id:this.id + sessionStorage.getItem('token'),
                                        account:sessionStorage.getItem('token'),
                                        ticket_typeid:this.goodsinfo.ticket_typeid,
                                        auth:this.goodsinfo.auth,
                                        price:this.goodsinfo.price,
                                        ticket_typename:this.goodsinfo.typename,
                                        school:this.school,
                                        people:this.people
                                    } ).then(result => {
                                        if(result.body.err_code === 1){
                                            console.log('已买票');
                                            Toast({
                                                message: '您已购买过门票',
                                                iconClass: 'fa fa-times fa-4x'
                                            });
                                        }else{
                                            Toast({
                                                message: '购买成功',
                                                iconClass: 'fa fa-check fa-4x'
                                            });
                                        }
                                })
                            }}
                            )
                        }
                    });
                }
                //旅游团体票的确认框
                else if(this.goodsinfo.ticket_typeid == 84){
                    MessageBox.prompt('请输入旅行社名称').then(({ value, action }) => {
                        this.agency = value;
                        if(action == 'confirm'){
                            MessageBox.prompt('请输入旅行社人数').then(({ value, action }) => {
                                this.people = value;
                                if(action == 'confirm'){
                                    MessageBox.prompt('请输入导游姓名').then(({ value, action }) =>{
                                        if(action == 'confirm'){
                                            this.guide = value;
                                            this.$http.post('Buyticket', {
                                                tick_id:this.id + sessionStorage.getItem('token'),
                                                account:sessionStorage.getItem('token'),
                                                ticket_typeid:this.goodsinfo.ticket_typeid,
                                                auth:this.goodsinfo.auth,
                                                price:this.goodsinfo.price,
                                                ticket_typename:this.goodsinfo.typename,
                                                agency:this.agency,
                                                people:this.people,
                                                guide:this.guide
                                            } ).then(result => {
                                                if(result.body.err_code === 1){
                                                    console.log('已买票');
                                                    Toast({
                                                        message: '您已购买过门票',
                                                        iconClass: 'fa fa-times fa-4x'
                                                    });
                                                }else{
                                                    Toast({
                                                        message: '购买成功',
                                                        iconClass: 'fa fa-check fa-4x'
                                                    });
                                                }
                                            })
                                        }
                                    })
                                }}
                            )
                        }
                    });
                }
                //车辆进出票
                else if(this.goodsinfo.ticket_typeid == 85){
                    MessageBox.prompt('请输入车牌号').then(({ value, action }) => {
                        this.car_number = value;
                        if(action == 'confirm'){
                            this.$http.post('Buyticket', {
                                tick_id:this.id + sessionStorage.getItem('token'),
                                account:sessionStorage.getItem('token'),
                                ticket_typeid:this.goodsinfo.ticket_typeid,
                                auth:this.goodsinfo.auth,
                                price:this.goodsinfo.price,
                                ticket_typename:this.goodsinfo.typename,
                                car_number:this.car_number,
                            } ).then(result => {
                                if(result.body.err_code === 1){
                                    console.log('已买票');
                                    Toast({
                                        message: '您已购买过门票',
                                        iconClass: 'fa fa-times fa-4x',
                                    });
                                }else if(result.body.err_code === 0){
                                    console.log('买票成功');
                                    Toast({
                                        message: '购买成功',
                                        iconClass: 'fa fa-check fa-4x'
                                    });
                                }
                            })
                        }
                    });
                }
            }
        },
        components:{
            swiper,
            numbox
        }
    }
</script>

<style lang="scss" scoped>
    .goodsinfo-container{
        background-color: #eee;
        overflow: hidden;
    }
    .now_price{
        color:red;
        font-size:16px;
        font-weight: bold;
    }
    .amount{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .mui-card-footer{
        display:block;
        button{
            margin:15px 0 ;
        }
    }
    .ball{
        width:15px;
        height:15px;
        border-radius: 50%;
        background-color: red;
        position:absolute;
        z-index: 99;
        top:430px;
        left:146px;
    }
</style>
